<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>俄罗斯方块</title>
    <style>
        body { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0; background: #000; color: #fff; font-family: Arial, sans-serif; }
        canvas { border: 1px solid #fff; margin-bottom: 10px; }
        .controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
        .controls button { padding: 10px; font-size: 16px; }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="300" height="600"></canvas>
    <div class="controls">
        <button id="left">←</button>
        <button id="rotate">↻</button>
        <button id="right">→</button>
        <button id="down">↓</button>
    </div>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const ROWS = 20, COLS = 10, BLOCK_SIZE = 30;
        let board = Array.from({ length: ROWS }, () => Array(COLS).fill(0));
        let piece, score = 0, lastTime = 0, fallInterval = 500;

        const PIECES = [
            [[1, 1, 1, 1]], [[1, 1], [1, 1]], [[0, 1, 0], [1, 1, 1]],
            [[1, 0, 0], [1, 1, 1]], [[0, 0, 1], [1, 1, 1]],
            [[0, 1, 1], [1, 1, 0]], [[1, 1, 0], [0, 1, 1]]
        ];

        function createPiece() {
            const type = Math.floor(Math.random() * PIECES.length);
            return { shape: PIECES[type], x: Math.floor((COLS - PIECES[type][0].length) / 2), y: 0 };
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            board.forEach((row, y) => row.forEach((val, x) => {
                if (val) ctx.fillStyle = 'cyan', ctx.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
            }));
            if (piece) piece.shape.forEach((row, dy) => row.forEach((val, dx) => {
                if (val) ctx.fillStyle = 'red', ctx.fillRect((piece.x + dx) * BLOCK_SIZE, (piece.y + dy) * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
            }));
            ctx.fillStyle = 'white', ctx.fillText(`得分: ${score}`, 10, 20);
        }

        function collide(p) {
            return p.shape.some((row, dy) => row.some((val, dx) => 
                val && (board[p.y + dy] && board[p.y + dy][p.x + dx]) || p.x + dx < 0 || p.x + dx >= COLS || p.y + dy >= ROWS
            ));
        }

        function mergePiece(p) {
            p.shape.forEach((row, dy) => row.forEach((val, dx) => {
                if (val) board[p.y + dy][p.x + dx] = val;
            }));
        }

        function clearLines() {
            for (let y = ROWS - 1; y >= 0; y--) {
                if (board[y].every(cell => cell)) {
                    board.splice(y, 1), board.unshift(Array(COLS).fill(0)), score += 100;
                }
            }
        }

        function update(time = 0) {
            const deltaTime = time - lastTime;
            if (!piece) {
                piece = createPiece();
                if (collide(piece)) return alert('游戏结束'), location.reload();
            }
            if (deltaTime >= fallInterval) {
                const newPiece = { ...piece, y: piece.y + 1 };
                if (collide(newPiece)) mergePiece(piece), clearLines(), piece = null;
                else piece = newPiece;
                lastTime = time;
            }
            draw(), requestAnimationFrame(update);
        }

        function movePiece(dx, dy) {
            if (!piece) return;
            const newPiece = { ...piece, x: piece.x + dx, y: piece.y + dy };
            if (!collide(newPiece)) piece = newPiece;
        }

        function rotatePiece() {
            if (!piece) return;
            const newPiece = { ...piece, shape: piece.shape[0].map((_, i) => piece.shape.map(row => row[i]).reverse()) };
            if (!collide(newPiece)) piece = newPiece;
        }

        // 键盘控制
        window.addEventListener('keydown', e => {
            if (!piece) return;
            switch (e.key) {
                case 'ArrowLeft': movePiece(-1, 0); break;
                case 'ArrowRight': movePiece(1, 0); break;
                case 'ArrowDown': movePiece(0, 1); break;
                case 'ArrowUp': rotatePiece(); break;
            }
        });

        // 移动端按钮控制
        document.getElementById('left').addEventListener('click', () => movePiece(-1, 0));
        document.getElementById('right').addEventListener('click', () => movePiece(1, 0));
        document.getElementById('down').addEventListener('click', () => movePiece(0, 1));
        document.getElementById('rotate').addEventListener('click', rotatePiece);

        update();
    </script>
</body>
</html>
